<template>
	<view class="user-user" :style="'display:'+(isShow?'block':'none')">
		<view :style="'height:'+(winHeight-navHeight)+'px;position:relative;width:100%;'">

			<scroll-view refresher-enabled="true" :refresher-triggered="refresher_triggered"
				refresher-default-style="none" refresher-background="#ffffff" @refresherrefresh="refresherrefresh"
				class="page" @scroll="mainScrollEvent" scroll-y :style="'height:'+(winHeight-navHeight)+'px;'">
				<view >
					
					<view class="UCenter-bg" style="padding-bottom:40upx;" :style="[{'padding-top':(barHeight+titleH+(statusbarHeight/2)+30)+'px'}]">
						<view v-if="loadding" class="pull-to-refresh-layer" :style="'top:'+navHeight+'px'">
							<view class="preloader"></view>
						</view>
						<navigator class="content arrow" url="../../pages1/user/userInfo" hover-class="none">
							<view class="flex flex-direction align-center" style="width:120upx;">
								<view class="media" >
									<image
										:src="userInfo&&userInfo.avatar?(userInfo.avatar):'../../static/default_member_logo.png'"
										class="png radius shadow" mode="aspectFill"></image>
								</view>
							</view>
							<view v-if="userInfo" style="width:100%;padding-right:50upx;">
								<view class="name" style="width:calc( 100% - 350upx );">
									<view class="text-xl text-bold text-cut">
										<text class="text-bold">{{userInfo.username}}</text>
									</view>
								</view>
								<view class="text-gray flex align-center justify-between" style="font-weight:normal;padding-left:10upx;">
									<text v-if="userInfo.usercode"><text class="text-df">账号</text>:{{userInfo.usercode}}</text>
									<text v-else><text class="text-df">账号</text>:<text class="text-df text-red">未设置</text></text>
									<image src="../../static/qr_code.png" style="width:30upx;height:30upx;"></image>
								</view>
							</view>
							
						</navigator>
					</view>
					<view class=" cu-list menu margin-top-sm">
						<view class="cu-item arrow text-baseColor padding-right-0">
							<button class="cu-btn content" style="align-items:center;" data-url="../../pages1/user/userInfo" @click="$util.toPage">
								<image src="../../static/me.png" class="png" mode="aspectFit"></image>
								<text class="text-baseColor">个人信息</text>
							</button>
						</view>
						<view class="cu-item arrow text-baseColor padding-right-0">
							<button class="cu-btn content" style="align-items:center;" data-url="" @click="$util.toPage">
								<image src="../../static/my-pic.png" class="png" mode="aspectFit"></image>
								<text class="text-baseColor">我的相册</text>
							</button>
						</view>
					</view>	
					<view class=" cu-list menu">
						
						<view class="cu-item arrow text-baseColor padding-right-0">
							<button class="cu-btn content" style="align-items:center;" data-url="" @click="$util.toPage">
								<image src="../../static/wallet.png" class="png" mode="aspectFit"></image>
								<text class="text-baseColor">我的钱包</text>
							</button>
						</view>
					</view>				
					<view class=" cu-list menu">
						<view class="cu-item arrow text-baseColor padding-right-0">
							<button class="cu-btn content" style="align-items:center;" data-url="../../pages1/user/setting" @click="$util.toPage">
								<image src="../../static/profile_set_ic.png" class="png" mode="aspectFit"></image>
								<text class="text-baseColor">设置</text>
							</button>
						</view>
					</view>
		
				</view>
			</scroll-view>
		</view>


	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';

	import chat from 'model/chatModel.js';
	import userObj from 'model/userModel.js';
	import {appConfig} from 'model/commonModel.js';
	let disp = require("common/broadcast");
	let me = null;
	export default {
		data() {
			return {
				refresher_triggered: false,
				loadding: 0,
				customBarH: 0,
				t: 0,
				headeH: 0,
				headeT: 0,
				startY: 0,
				top: 0,
				status: 0,
				height: 0,
				statusbarHeight: 0,
				barHeight: 0,
				titleH: 0,
				baseHeadH: 0,
				baseHeadT: 0,
				platform: this.systemInfo.platform,
				winWidth: this.systemInfo.windowWidth,
				cardWidth:0,
				jg:0,
				opacity: 0,
				listHeight: 10000,
				headerHeight: 0,
				systemInfo:this.systemInfo,
				shortName:this.shortName
			};
		},
		props: {
			isShow: {
				type: [Boolean, String],
				default: false
			},
		},
		created() {
			me = this;
			this.cardWidth = this.winWidth-uni.upx2px(60);
			
			this.statusbarHeight = this.StatusBar;
			this.customBarH = this.CustomBar;
			this.barHeight = this.CustomBar;
			this.titleH = uni.upx2px(20);

			//#ifdef APP-PLUS || MP-ALIPAY
			this.headeH = uni.upx2px(500)+this.statusbarHeight;
			this.headeT = uni.upx2px(40);
			this.baseHeadH = uni.upx2px(500)+this.statusbarHeight;
			this.baseHeadT = uni.upx2px(40);
			this.t = uni.upx2px(100) + this.StatusBar;
			// #endif

			//#ifdef H5 || MP-BAIDU || MP-TOUTIAO || MP-WEIXIN
			this.headeT = this.StatusBar;
			this.headeH = uni.upx2px(500)+this.statusbarHeight;
			this.baseHeadH = uni.upx2px(500)+this.statusbarHeight;
			this.baseHeadT = this.StatusBar;
			this.t = this.StatusBar + uni.upx2px(100);
			// #endif

			this.jg = this.headeH-this.barHeight-uni.upx2px(290)-this.titleH-uni.upx2px(15)-this.statusbarHeight/2;

			disp.on("changeUserInfo", function() {
				me.loaddingEvent(0);
			});


		},
		mounted() {
			this.height = uni.getSystemInfoSync().windowHeight;
			this.loaddingEvent(1);
		},
		watch: {
			hasLogin(val) {
				if (val) {
					this.loaddingEvent(0);
				}
			}
		},
		computed: {
			...mapState({
				userInfo: ({
					userModule
				}) => userModule.userInfo,
				hasLogin: ({
					userModule
				}) => userModule.hasLogin,
				appConfig: ({
					baseModule
				}) => baseModule.appConfig,
				navHeight: ({
					baseModule
				}) => baseModule.navHeight,
				winHeight: ({
					baseModule
				}) => baseModule.winHeight,
				unreadMsgCount: ({
					chatModule
				}) => chatModule.unreadMsgCount,
				ck_status: ({
					baseModule
				}) => baseModule.status
			})
		},
		methods: {
			...mapMutations(['baseModule/setAppConfig','userModule/login', 'chatModule/setChatTo', 'userModule/logout']),
			refresherrefresh() {
				this.refresher_triggered = true;
				this.loadding = 1;
				appConfig(me).then(res=>{me['baseModule/setAppConfig'](res);}).catch(err=>{console.log(err);});
				me.loaddingEvent(0);
			},
			loaddingEvent(isInit) {
				if (me.hasLogin) {
					userObj.getUserInfo(me).then(res => {
						me['userModule/login'](res);
						me.setUserInfo(me.userInfo);
						me.loaddingDone();
					}).catch(err => {
						me.loaddingDone();
						if (!isInit) {
							uni.showToast({
								title: '刷新失败',
								icon: 'none',
								duration: 1000
							});
						}
					});

				} else {
					me.loaddingDone();
				}
			},
			loaddingDone() {
				var t = setInterval(function() {
					me.refresher_triggered = false;
					me.loadding = 0;
					clearInterval(t);
				}, 900);
			},
			autoRefresh() {
				me.loadding = 1;
			},
			mainScrollEvent(e) {
				me.opacity = (e.detail.scrollTop) / (me.barHeight);
			},
			toPage(e) {
				if (e.currentTarget.dataset['url']) {
					uni.navigateTo({
						url: e.currentTarget.dataset['url'],
						animationType: e.currentTarget.dataset['animationtype'] //'fade-in'
					})
				} else {
					uni.showToast({
						title: '即将上线,敬请期待.',
						icon: 'none'
					});
				}
			},
			call(phone){
				if(phone){
					uni.makePhoneCall({
						phoneNumber: phone
					});
				}
			}
		}
	}
</script>

<style>
.cu-list+.cu-list{
	margin-top:20upx;
}
.cu-list.menu>.cu-item:after{
	left:80upx;
	overflow: hidden;
}	
</style>
